// 首页 home的布局
import React from 'react'

// 引入 轮播图组件
import { Carousel, WingBlank, Toast, Flex, Icon } from 'antd-mobile'
// 引入 css 样式
import './index.scss'

// 引入axios发送请求
import { getswiper, getgroups, getnews } from '../../../api/index'

// 导入菜单图片
import Nav1 from '../../../assets/image/nav-1.png'
import Nav2 from '../../../assets/image/nav-2.png'
import Nav3 from '../../../assets/image/nav-3.png'
import Nav4 from '../../../assets/image/nav-4.png'

// 菜单数组 渲染菜单的数据
const navList = [
  { id: 1, title: '整租', img: Nav1, router: '/home/index' },
  { id: 2, title: '合租', img: Nav2, router: '/home/index' },
  { id: 3, title: '地图找房', img: Nav3, router: '/home/index' },
  { id: 4, title: '去出租', img: Nav4, router: '/home/index' }
]

// 组件
export default class extends React.Component {
  // 数据
  state = {
    // 图片数据源
    data: ['1', '2', '3'],
    // 设置图片的高度
    imgHeight: 176,
    // 租房小区数据
    groupslist: [],
    // 最新资讯
    news: []
  }
  // 页面加载的钩子函数
  componentDidMount() {
    this.swiper()
    this.groups()
    this.news()
  }

  // 获取轮播图 函数
  async swiper() {
    const { data: res } = await getswiper()

    if (res.status !== 200) return Toast.info('获取轮播图失败')

    this.setState({
      data: res.body
    })
    // console.log(res)
  }
  // 获取租房小区 函数
  async groups() {
    const { data: res } = await getgroups()
    if (res.status !== 200) return Toast.info('租房小区资料获取失败')
    this.setState({
      groupslist: res.body
    })
    // console.log(res)
  }
  // 获取最新资讯
  async news() {
    const { data: res } = await getnews()
    if (res.status !== 200) return Toast.info('租房小区资料获取失败')
    this.setState({
      news: res.body
    })
    console.log(this.state.news)
  }

  // 轮播图 函数
  swiperList() {
    return this.state.data.map(val => (
      <a
        key={val}
        href="#"
        style={{
          display: 'inline-block',
          width: '100%',
          height: this.state.imgHeight
        }}
      >
        <img
          src={`http://localhost:8080${val.imgSrc}`}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
        />
      </a>
    ))
  }

  // 菜单函数
  nav() {
    return navList.map(x => {
      return (
        <Flex.Item
          key={x.id}
          onClick={() => {
            this.props.history.push(x.router)
          }}
        >
          <img src={x.img}></img>
          <p>{x.title}</p>
        </Flex.Item>
      )
    })
  }

  // 最新资讯
  newss = () => {
    return this.state.news.map(x => {
      return (
        <div key={x.id} className={'news'}>
          <img src={`http://localhost:8080${x.imgSrc}`}></img>
          <div>
            <p>{x.title}</p>
            <p className={'news_x'}>
              <span>{x.date}</span>
              <span>{x.from}</span>
            </p>
          </div>
        </div>
      )
    })
  }

  // 渲染UI
  render() {
    return (
      <div className={'index'}>
        {/* // 轮播图 */}
        <WingBlank>
          <Carousel autoplay infinite>
            {this.swiperList()}
          </Carousel>
          {/* //搜索框 */}
          <div className={'search'}>
            <div className={'search_box3'}>
              <div
                className={'search_box1'}
                onClick={() => this.props.history.push('/citylist')}
              >
                <span>上海</span>
                <i className="icon-play3"></i>
              </div>
              <div
                className={'search_box2'}
                onClick={() => this.props.history.push('/search')}
              >
                <i className="icon-search"></i>
                <span>请输入小区或地址</span>
              </div>
            </div>
            <i
              className="icon-compass2"
              onClick={() => this.props.history.push('/maps')}
            ></i>
          </div>
        </WingBlank>
        {/* 导航菜单 */}
        <Flex>{this.nav()}</Flex>
        {/* 租房小组 */}
        <div className={'zu'}>
          <h3>租房小区</h3>
          <span>更多</span>
        </div>
        <div className={'zufang'}>
          {this.state.groupslist.map(x => {
            return (
              <div key={x.id}>
                <span>
                  <h4>{x.title}</h4>
                  <p>{x.desc}</p>
                </span>
                <img src={`http://localhost:8080${x.imgSrc}`}></img>
              </div>
            )
          })}
        </div>

        {/* 最新资讯 */}
        <div style={{ padding: '15px', marginBottom: '50px' }}>
          <h3 style={{ marginBottom: '10px', marginLeft: '8px' }}>最新资讯</h3>

          {this.newss()}
        </div>
      </div>
    )
  }
}
